<template>
    <div class="LjCollapse" :style="{ backgroundColor: bgColor, width: width }">
        <div class="LjCollapseHead" :style="{
            color: headColor,
            borderLeftColor: headColor,
        }" @click="collapse = !collapse">
            <span>{{ title }}</span>
            <span style="float: right">
                <i v-if="collapse" class="el-icon-arrow-down"></i>
                <i v-else class="el-icon-arrow-right"></i>
            </span>
        </div>
        <div style="margin-top: 10px; font-size: 18px" v-if="collapse">
            <slot></slot>
        </div>
    </div>
</template>
   
<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: '标题',
    },
    headColor: {
        type: String,
        default: 'orange',
    },
    bgColor: {
        type: String,
        default: 'rgba(41, 41, 41, 0.589)', //浅黑
        // default: "#253266b7",//浅蓝
    },
    width: {
        type: String,
        default: '100%',
    },
    isCollapse: {
        type: Boolean,
        default: true,
    }
})
const collapse = ref(props.isCollapse)
</script>
   
<style lang="scss" scoped>
.LjCollapse {
    color: white;
    background-color: rgba(41, 41, 41, 0.589);
    padding: 10px;
    .LjCollapseHead {
        line-height: 30px;
        border-left: 5px solid;
        font-weight: bold;
        padding-left: 10px;
        font-size: 20px;
        caret-color: transparent;

        &:hover {
            cursor: pointer;
        }
    }
}
</style>